<template>
	<view class="page">
		<SmsInputDialog :isShow="isShowSmsDialog" @next="handleSms" :phoneNumber="phone"></SmsInputDialog>
		<view class="container">
			<view class="header">
				<view class="slogan">
					<image src="/static/icon1.png" v-if="true" class="icon1"></image>
					<text class="slogan-text">借钱不求人 急用钱找我们</text>
				</view>
			</view>
			<view class="container2">
				<view class="loan-card">
					<text class="loan-title">借款金额</text>
					<text class="loan-amount">¥{{ selectedAmount }}</text>
					<text class="loan-max">预计最高可借{{ maxAmount }}</text>

					<view class="amount-options">
						<text :class="['index-amount-btn', selectedAmount === 30000 ? 'selected' : '']"
							@click="selectAmount(30000)">30000</text>
						<text :class="['index-amount-btn', selectedAmount === 50000 ? 'selected' : '']"
							@click="selectAmount(50000)">50000</text>
						<text :class="['index-amount-btn', selectedAmount === 100000 ? 'selected' : '']"
							@click="selectAmount(100000)">100000</text>
						<text :class="['index-amount-btn', selectedAmount === 200000 ? 'selected' : '']"
							@click="selectAmount(200000)">全部借出</text>
					</view>

					<text class="loan-rate">单化利率7.2%起，以审核为准</text>
				</view>

				<view class="features">
					<view class="feature-item">

						<image style="width: 39rpx;height: 39rpx;margin-right: 10rpx;" src="/static/icon_ok_yellow.png">
						</image>
						<text>便捷申请</text>
					</view>
					<view class="feature-item">
						<image style="width: 39rpx;height: 39rpx; margin-right: 10rpx;"
							src="/static/icon_ok_yellow.png"></image>
						<text>安全合规</text>
					</view>
					<view class="feature-item">
						<image style="width: 39rpx;height: 39rpx;margin-right: 10rpx;" src="/static/icon_ok_yellow.png">
						</image>
						<text>1亿+用户</text>
					</view>
				</view>

				<view class="input-section">
					<input class="phone-input" type="number" placeholder-class="placeholder" placeholder="请输入手机号"
						v-model="phone" />
				</view>

				<view class="agreement">
					<checkbox :checked="isAgreed" @click="toggleAgreement" />
					<text class="agreement-text">
						我已阅读并同意
						<!-- 						<text class="link" @click="linkProtocol(0)">《用户注册协议》</text> -->
						<text class="link" @click="linkProtocol(2)">《用户服务及隐私协议》</text>
						<!-- <text class="link" @click="linkProtocol(3)">《风险提示告知书》</text> -->
					</text>
				</view>
				<button class="submit-btn-2">本机号码一键登录</button>
				<button class="submit-btn" @click="checkQuota">其他手机号码登录</button>

			</view>

			<!-- 测试按钮以下部份 -->

			<view class="advantages">
				<view class="advantages-header">
					<view class="line"></view>
					<text class="title">合规产品 安全保障</text>
					<view class="line"></view>
				</view>

				<view class="advantage-grid">
					<view class="advantage-item">
						<image class="advantage-icon" src="/static/item1.png" mode="aspectFit"></image>
						<text class="advantage-title">额度高</text>
						<text class="advantage-desc">最高可借20万</text>
					</view>
					<view class="advantage-item">
						<image class="advantage-icon" src="/static/login-item3-FpRqirNs.png" mode="aspectFit"></image>
						<text class="advantage-title">审批快</text>
						<text class="advantage-desc">最快1分钟出额度</text>
					</view>
					<view class="advantage-item">
						<image class="advantage-icon" src="/static/login-item2-D87iSdbF.png" mode="aspectFit"></image>
						<text class="advantage-title">期限灵活</text>
						<text class="advantage-desc">多种期限可选</text>
					</view>
					<view class="advantage-item">
						<image class="advantage-icon" src="/static/login-item4-CzpjPU13.png" mode="aspectFit"></image>
						<text class="advantage-title">保密信息</text>
						<text class="advantage-desc">银行级信息加密保障</text>
					</view>
				</view>
			</view>

			<view class="dynamic-users">
				<image src="/static/title_all_use.png" style="height: 83rpx;width: 100%;" mode="scaleToFill" />
				<scroll-view class="scroll-container" scroll-x="true" :scroll-left="scrollLeft" @scroll="onScroll">
					<view class="layout-container" v-for="(user, index) in users" :key="index">
						<!-- 	<image class="user-avatar" :src="user.avatar" mode="aspectFill"></image>
						<view class="user-info">
							<text class="user-name">{{ user.name }}</text>
							<text class="user-phone">{{ user.phone }}</text>
						</view>
						<view class="user-status">
							<uni-icons type="checkmarkempty" size="14" color="#52c41a"></uni-icons>
							<text class="status-text">提交成功</text>
						</view> -->
						<div class="row">
							<!-- 第一个元素：图片 -->
							<image class="user-avatar" :src="user.avatar"></image>
							<!-- 第二个元素：包含两个竖向排列文本的 view -->
							<div class="vertical-texts">
								<p class="user-name">{{ user.name }}</p>
								<p class="user-phone">
									{{ user.phone }}
								</p>
							</div>
							<!-- 第三个元素：文本 -->
							<p style="color: #4685D2; font-size: 18rpx;">{{user.time}}分钟前</p>

						</div>
						<div class="row">
							<!-- 第一个元素：图片 -->
							<image style="width: 27rpx; height: 27rpx" src="/static/icon_ok.png"></image>
							<!-- 第二个元素：文本 -->
							<p style="font-size: 27rpx;margin-left: 6%;">提交成功</p>
						</div>
					</view>
				</scroll-view>
			</view>

			<view class="footer">
				<text class="risk-warning">贷款有风险，借款需谨慎</text>
				<text class="risk-detail">请根据个人能力合理贷款，理性消费，避免逾期</text>
				<text class="risk-detail">贷款额度、放款时间以实际审批结果为准</text>
				<text class="risk-detail">综合年化利率区间：6%~18%(单利)</text>
				<!-- <text class="risk-detail">天明贷款代理东莞有限公司</text> -->
				<!-- <text class="risk-detail">安徽赋恒永杰金融服务外包有限公司</text> -->

				<!-- <text class="risk-detail">左新凰（河北）商务服务有限公司合肥分公司</text> -->
				<text class="risk-detail">左新凰（河北）商务服务有限公司台州分公司</text>

			</view>
		</view>



	</view>
</template>

<script>
	import infoVue from './info.vue';
	import request from '@/js/request.js';

	export default {
		data() {
			return {
				params: {},
				scrollLeft: 0, // 初始滚动位置
				direction: 1, // 滚动方向，1 表示向下，-1 表示向上
				timer: null, // 定时器变量
				//是否显示验证码对话框
				isShowSmsDialog: false,
				smsCode: "",
				selectedAmount: 50000,
				maxAmount: 200000,
				phone: "",
				isAgreed: false,
				users: [{
						time: 5,
						name: "赵先生",
						phone: '138****6566',
						avatar: 'https://ai-public.mastergo.com/ai/img_res/876209323070f6888b7b7deca0831bdc.jpg'
					},
					{
						time: 6,
						name: '李女士',
						phone: '139****8549',
						avatar: 'https://ai-public.mastergo.com/ai/img_res/f6fae733d1a61ea10faf0de86f130c28.jpg'
					},
					{
						time: 7,
						name: '张先生',
						phone: '189****8549',
						avatar: 'https://ai-public.mastergo.com/ai/img_res/876209323070f6888b7b7deca0831bdc.jpg'
					},
					{
						time: 10,
						name: '林女士',
						phone: '189****8549',
						avatar: 'https://ai-public.mastergo.com/ai/img_res/f6fae733d1a61ea10faf0de86f130c28.jpg'
					},
					{
						time: 20,
						name: '刘先生',
						phone: '189****8549',
						avatar: 'https://ai-public.mastergo.com/ai/img_res/876209323070f6888b7b7deca0831bdc.jpg'
					},
					{
						time: 22,
						name: '葛先生',
						phone: '189****8549',
						avatar: 'https://ai-public.mastergo.com/ai/img_res/876209323070f6888b7b7deca0831bdc.jpg'
					},
					{
						time: 28,
						name: '阮先生',
						phone: '189****8549',
						avatar: 'https://ai-public.mastergo.com/ai/img_res/876209323070f6888b7b7deca0831bdc.jpg'
					}
				]

			};

		},
		onLoad(options) {
			const url = window.location.href;
			this.params = this.getUrlParams(url);

			for (const key in this.params) {
				if (this.params.hasOwnProperty(key)) {
					const value = this.params[key];
					console.log(`Key: ${key}, Value: ${value}`);
				}
			}

		},
		onReady() {
			console.log('index 页面onReady');
			if (this.timer) {
				clearInterval(this.timer);
			}
			this.timer = setInterval(() => {
				this.autoScroll();
				// console.log('index 页面autoScroll');
			}, 50);
		},
		onHide() {
			console.log('inde 页面onHide');
			if (this.timer) {
				clearInterval(this.timer);
			}

		},

		methods: {
			getUrlParams(url) {
				const params = {};
				const queryString = url.split('?')[1];
				if (queryString) {
					const keyValuePairs = queryString.split('&');
					for (let i = 0; i < keyValuePairs.length; i++) {
						const keyValue = keyValuePairs[i].split('=');
						const key = decodeURIComponent(keyValue[0]);
						const value = decodeURIComponent(keyValue[1]);
						params[key] = value;
					}
				}
				return params;
			},
			autoScroll() {
				// 获取 scroll-view 元素
				const scrollView = uni.createSelectorQuery().select('.scroll-container');
				scrollView.fields({
					size: true,
					scrollOffset: true
				}, (res) => {
					const {
						scrollWidth,
						scrollLeft,
						width
					} = res;
					// 判断是否到达边界，若到达则改变滚动方向
					if (scrollLeft >= scrollWidth - width) {
						this.direction = -1;
					} else if (scrollLeft <= 0) {
						this.direction = 1;
					}
					// console.log("autoScroll direction", this.direction, scrollLeft, scrollWidth, width);
					// 根据滚动方向更新滚动位置
					this.scrollLeft += this.direction * 1;
				}).exec();
			},
			onScroll(e) {
				// console.log("页面滚动");
				// 可在此处理滚动事件

			},
			linkProtocol(index) {
				uni.navigateTo({
					url: "/pages/index/infoShare/infoShare"
				});
			},
			selectAmount(amount) {
				console.log("selectAmount:", amount);
				this.selectedAmount = amount;
			},

			toggleAgreement() {
				this.isAgreed = !this.isAgreed;
			},
			//收到对话框输入的验证码
			handleSms(data) {
				console.log("验证验证码成功：", data);
				this.toNextPage();
				this.isShowSmsDialog = false;
				// if (data == "close") {
				// 	this.isShowSmsDialog = false;
				// 	return;
				// }
				// this.smsCode = data;
				// console.log("sms code:", data);
				// console.log("sms phone:", this.phone);
				// this.checkSmsCode();
				// uni.showLoading({
				// 	title: '加载中...',
				// 	mask: true // 显示透明蒙层，防止触摸穿透
				// });

			},


			async sendSmsPostRequest() {
				// 准备要发送的 JSON 数据
				//0 银速 1天明 2左新凰 3亿韬科技
				//todo：
				const jsonData = {
					phone: this.phone,
					type: 0
				};
				try {
					var resp = await request("/api/credit/sendSms", jsonData);
					this.isShowSmsDialog = true;
				} catch (error) {

				}

			},

			checkQuota() {
				const phoneReg = /^1[3-9]\d{9}$/;
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
					return;
				}
				if (!this.isAgreed) {
					uni.showToast({
						title: '请阅读并同意相关协议',
						icon: 'none'
					});
					return;
				}
				this.sendSmsPostRequest();
			},
			toNextPage() {
				//以下页面跳转
				const dataToSend = {
					userPhone: this.phone,
					amount: this.selectedAmount
				};
				for (const key in this.params) {
					if (this.params.hasOwnProperty(key)) {
						const value = this.params[key];
						dataToSend[key] = this.params[key];
						// console.log(`Key: ${key}, Value: ${value}`);
					}
				}
				// 将数据转换为查询字符串形式
				const queryString = Object.keys(dataToSend)
					.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(dataToSend[key])}`)
					.join('&');
				console.log("queryString:", queryString);
				uni.navigateTo({
					url: `/pages/index/info?${queryString}`
				});


			}

		}
	};
</script>

<style scoped>
	.page {
		height: 100%;
		background: linear-gradient(180deg, #1890ff 0%, #e6f7ff 100%);
	}


	.icon1 {
		margin-top: 0.5%;
		width: 33rpx;
		height: 33rpx;

	}

	.container {
		text-align: center;
		padding: 30rpx;
	}

	.container2 {
		padding: 10rpx;

		margin-bottom: 10rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.header {
		margin-bottom: 30rpx;
	}

	.slogan {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.slogan-text {
		text-align: center;
		align-items: center;
		/* margin-left: 2%; */
		color: #ffffff;
		font-size: 31rpx;
	}

	.loan-card {
		text-align: center;
		border-radius: 30rpx;
		padding: 10rpx;
		margin: 10rpx;
		background: linear-gradient(135deg, #fff6e5 0%, #fff 100%);
	}

	.loan-title {
		color: #333;
		display: block;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		line-height: 30rpx;
		font-style: normal;
		text-transform: none;
	}

	.loan-amount {
		font-size: 88rpx;
		color: #f5a623;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.loan-max {
		font-size: 34rpx;
		color: #BE8421;
		margin-bottom: 30rpx;
		display: block;
	}

	.amount-options {
		/* 	display: flex;
		gap: 10rpx;
		margin-bottom: 10rpx; */

		/* 设置为 Flex 容器 */
		display: flex;
		/* 子元素在主轴上水平排列 */
		flex-direction: row;
		/* 子元素在主轴上平均分配空间 */
		justify-content: space-around;
		/* 父元素高度包裹内容 */
		height: auto;
		/* 为父元素添加一些样式，方便查看 */
		/* background-color: #f0f0f0; */
		padding-top: 20rpx;

	}

	.index-amount-btn {
		/* min-height: 60rpx; */
		/* 可以根据需要调整 */
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		/* 内边距，确保文本有足够的空间 */
		/* text-align: center; */

		/* 文本居中 */
		/* border: 1px; */
		border: 0.5px solid #ccc;
		/* 无边框 */
		border-radius: 30rpx;
		/* 圆角 */
		/* background-color: #007BFF; */
		/* 可选：设置背景色 */
		/* color: white; */
		/* 可选：设置文本颜色 */
		/* 其他样式，如字体大小、字重等 */
		font-size: 25rpx;

		display: flex;
		/* 主轴上居中对齐，实现水平居中 */
		justify-content: center;
		align-items: center;

	}

	.selected {
		border: none;
		background: #f5a623;
		color: #fff;
	}

	.loan-rate {
		font-size: 22rpx;
		color: #BE8421;
	}

	.features {
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}



	.feature-item {
		font-size: 26rpx;
		color: #FF8E3C;
		/* 设置为 Flex 容器 */
		display: flex;
		/* 子元素在主轴上水平排列 */
		flex-direction: row;
		/* 子元素在主轴上两端对齐，中间有间距 */
		justify-content: space-between;
		/* 子元素在交叉轴上垂直居中 */
		align-items: center;
	}

	.input-section {
		background: #F5F6FA;
		margin: 10rpx;
		/* border: 1rpx solid #E1E1E1; */
		border-radius: 50rpx;
	}

	.phone-input {
		height: 92rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
	}

	.placeholder {
		font-size: 28rpx;
		color: #ccc;
	}

	.agreement {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 1%;
		gap: 10rpx;
		margin-bottom: 30rpx;
	}

	.agreement-text {
		text-align: center;
		font-size: 22rpx;
		color: #666;
	}

	.link {
		color: #1890ff;
	}

	.submit-btn {
		/* padding-top: 10rpx; */
		/* padding-bottom: 1%; */
		/* padding-left: 20%; */
		/* padding-right: 20%; */
		background: #1890ff;
		color: #fff;
		/* height: 109rpx; */
		/* width: 613rpx; */
		line-height: 100rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 50rpx;
	}

	.submit-btn-2 {
		border: 1px solid #1890ff;
		/* padding-top: 10rpx; */
		/* padding-bottom: 1%; */
		/* padding-left: 20%; */
		/* padding-right: 20%; */
		color: #333;
		/* height: 109rpx; */
		/* width: 613rpx; */
		line-height: 100rpx;
		border-radius: 20rpx;
		font-size: 32rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 50rpx;
	}

	.advantages {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
	}

	.advantages-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.line {
		width: 60rpx;
		height: 2px;
		background: #ddd;
	}

	.title {
		font-size: 32rpx;
		color: #333;
		margin: 0 20rpx;
		font-weight: 500;
	}

	.advantage-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
	}

	.advantage-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.advantage-icon {
		width: 83rpx;
		height: 83rpx;
		margin-bottom: 20rpx;
	}

	.advantage-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.advantage-desc {
		font-size: 24rpx;
		color: #666;
	}

	.dynamic-users {
		background: #fff;
		border-radius: 35rpx;
		padding-top: 0rpx;
		padding-bottom: 40rpx;
		margin-bottom: 30rpx;
	}

	.dynamic-header {



		margin-bottom: 30rpx;
		background-image: url('/static/title_all_use.png');
		background-size: cover;
		background-position: center;
	}

	.user-list {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
	}

	.user-item {
		display: inline-block;
		/* 让子元素横向排列 */
		align-items: center;
		text-align: center;
		margin-right: 20rpx;

	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		width: 72rpx;
		height: 23rpx;
		font-size: 25rpx;
		color: #333333;
		display: block;
	}

	.user-phone {
		width: 97rpx;
		height: 13rpx;
		font-size: 18rpx;
		color: #999999;
		margin-top: 20%;

		color: #999;
	}

	.user-status {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.status-text {
		font-size: 24rpx;
		color: #52c41a;
	}

	.footer {
		text-align: center;
		padding: 40rpx 0;
	}

	.risk-warning {
		font-size: 28rpx;
		color: ##444444;
		margin-bottom: 20rpx;
		display: block;
	}

	.risk-detail {
		font-size: 24rpx;
		color: #444444;
		margin-bottom: 10rpx;
		display: block;
	}

	.company {
		font-size: 24rpx;
		color: #fff;
	}

	.scroll-container {
		white-space: nowrap;
		/* 防止子元素换行 */
		overflow-x: scroll;
		/* 允许横向滚动 */
		-webkit-overflow-scrolling: touch;
	}

	.layout-container {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #F5F5F5;
		flex-direction: column;
		padding: 2%;
		margin: 2%;
		border-radius: 20rpx;

		/* 让子元素（行）竖向排列 */
		display: inline-block;
		/* 让子元素横向排列 */
		gap: 10rpx;
		/* 行与行之间的间距 */
	}

	.row {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8%;
		/* 垂直居中对齐 */
		gap: 20px;
		/* 每行内元素之间的间距 */
	}

	.vertical-texts {
		display: flex;
		flex-direction: column;
		/* 让文本竖向排列 */
	}
</style>